<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image class="banner-img" :src="item.image" mode="aspectFill" @click="previewImage(index)"></image>
        <view class="banner-content" v-if="item.title">
          <text class="banner-title">{{ item.title }}</text>
          <text class="banner-desc">{{ item.desc }}</text>
        </view>
      </swiper-item>
    </swiper>

    <!-- 核心数据 -->
    <view class="data-section">
      <view class="data-item">
        <text class="data-value">{{ coreData.stores }}+</text>
        <text class="data-label">全国门店</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ coreData.cities }}+</text>
        <text class="data-label">覆盖城市</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ coreData.years }}+</text>
        <text class="data-label">品牌历史</text>
      </view>
      <view class="data-item">
        <text class="data-value">{{ coreData.partners }}+</text>
        <text class="data-label">合作伙伴</text>
      </view>
    </view>

    <!-- 品牌介绍 -->
    <view class="intro-section">
      <view class="section-header">
        <text class="section-title">品牌介绍</text>
        <text class="section-subtitle">BRAND INTRODUCTION</text>
      </view>
      <view class="intro-content">
        <image class="intro-image" :src="brandImage" mode="aspectFill"></image>
        <view class="intro-text">
          <text class="intro-desc">{{ brandIntro }}</text>
          <view class="intro-features">
            <view class="feature-item" v-for="(feature, index) in features" :key="index">
              <text class="feature-icon">{{ feature.icon }}</text>
              <text class="feature-text">{{ feature.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加盟优势 -->
    <view class="advantages-section" id="advantages">
      <view class="section-header">
        <text class="section-title">加盟优势</text>
        <text class="section-subtitle">JOIN ADVANTAGES</text>
      </view>
      <view class="advantages-grid">
        <view class="advantage-item" v-for="(advantage, index) in advantages" :key="index">
          <view class="advantage-icon">
            <text class="icon">{{ advantage.icon }}</text>
          </view>
          <text class="advantage-title">{{ advantage.title }}</text>
          <text class="advantage-desc">{{ advantage.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 加盟流程 -->
    <view class="process-section" id="process">
      <view class="section-header">
        <text class="section-title">加盟流程</text>
        <text class="section-subtitle">JOIN PROCESS</text>
      </view>
      <view class="process-steps">
        <view class="process-step" v-for="(step, index) in processSteps" :key="index">
          <view class="step-number">{{ index + 1 }}</view>
          <text class="step-title">{{ step.title }}</text>
          <text class="step-desc">{{ step.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 支持政策 -->
    <view class="support-section" id="support">
      <view class="section-header">
        <text class="section-title">支持政策</text>
        <text class="section-subtitle">SUPPORT POLICY</text>
      </view>
      <view class="support-list">
        <view class="support-item" v-for="(item, index) in supportItems" :key="index">
          <view class="support-header">
            <text class="support-title">{{ item.title }}</text>
            <text class="support-tag">{{ item.tag }}</text>
          </view>
          <text class="support-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 成功案例 -->
    <view class="cases-section">
      <view class="section-header">
        <text class="section-title">成功案例</text>
        <text class="section-subtitle">SUCCESS CASES</text>
      </view>
      <scroll-view class="cases-scroll" scroll-x>
        <view class="cases-container">
          <view class="case-item" v-for="(caseItem, index) in successCases" :key="index">
            <image class="case-image" :src="caseItem.image" mode="aspectFill"></image>
            <view class="case-info">
              <text class="case-title">{{ caseItem.title }}</text>
              <text class="case-location">{{ caseItem.location }}</text>
              <text class="case-result">{{ caseItem.result }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 常见问题 -->
    <view class="faq-section">
      <view class="section-header">
        <text class="section-title">常见问题</text>
        <text class="section-subtitle">FAQ</text>
      </view>
      <uni-list>
        <uni-list-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :note="faq.answer">
        </uni-list-item>
      </uni-list>
    </view>

    <!-- 底部咨询栏 -->
    <view class="consultation-bar">
      <view class="consultation-content">
        <view class="contact-info">
          <text class="contact-phone">{{ contactInfo.phone }}</text>
          <text class="contact-desc">{{ contactInfo.desc }}</text>
        </view>
        <button class="consult-btn" @click="goToConsultation">
          <text class="btn-text">立即咨询</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  const db = uniCloud.database();
  const pageDb=uniCloud.importObject('mydb-page')
export default {

  data() {
    return {
      brandName: '企业服务品牌',
      bannerList: [],
      coreData: {
        stores: 1500,
        cities: 300,
        years: 10,
        partners: 5000
      },
      brandIntro: '',
	  brandImage:'',
      features: [
        { icon: '✓', text: '10年品牌积淀' },
        { icon: '✓', text: '标准化服务体系' },
        { icon: '✓', text: '全方位运营支持' },
        { icon: '✓', text: '持续产品创新' }
      ],
      advantages: [],
      processSteps: [],
      supportItems: [],
      successCases: [],
      faqs: [],
      contactInfo: {
        phone: '400-888-8888',
        desc: '7×24小时加盟热线'
      }
    }
  },
  onLoad() {
  	pageDb.getInvestInfo().then((res)=>{
		this.brandImage=res.data.brandImage
  		this.bannerList=res.data.bannerList
		this.coreData=res.data.coreData
		this.brandIntro=res.data.brandIntro
		this.features=res.data.features
		this.advantages=res.data.advantages
		this.processSteps=res.data.processSteps
		this.supportItems=res.data.supportItems
		this.successCases=res.data.successCases
		this.faqs=res.data.faqs
		this.contactInfo=res.data.contactInfo
  	})
  },
  methods: {
    scrollToSection(sectionId) {
      uni.createSelectorQuery()
        .select(`#${sectionId}`)
        .boundingClientRect(data => {
          uni.pageScrollTo({
            scrollTop: data.top - 60,
            duration: 300
          })
        })
        .exec()
    },
    previewImage(index) {
      const urls = this.bannerList.map(item => item.image)
      uni.previewImage({
        current: urls[index],
        urls: urls
      })
    },
    goToConsultation() {
      uni.navigateTo({
        url: '/pages/contact/contact'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 120rpx;
  background-color: #f8f8f8;
}

// 导航栏
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 999;
  border-bottom: 1rpx solid #f0f0f0;
  
  .nav-left {
    display: flex;
    align-items: center;
    
    .logo {
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;
    }
    
    .brand-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .nav-right {
    display: flex;
    
    .nav-item {
      font-size: 26rpx;
      color: #666;
      margin-left: 40rpx;
      
      &:active {
        color: #4a90e2;
      }
    }
  }
}

// 轮播图
.banner-swiper {
  height: 400rpx;
  margin-top: 88rpx;
  
  .banner-img {
    width: 100%;
    height: 100%;
  }
  
  .banner-content {
    position: absolute;
    bottom: 60rpx;
    left: 40rpx;
    color: white;
    
    .banner-title {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 16rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }
    
    .banner-desc {
      display: block;
      font-size: 28rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }
  }
}

// 核心数据
.data-section {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 40rpx 0;
  margin-bottom: 20rpx;
  
  .data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .data-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #4a90e2;
      margin-bottom: 8rpx;
    }
    
    .data-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 通用区块样式
.section-header {
  text-align: center;
  padding: 40rpx 0 20rpx;
  
  .section-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
  }
  
  .section-subtitle {
    display: block;
    font-size: 24rpx;
    color: #999;
    letter-spacing: 4rpx;
  }
}

// 品牌介绍
.intro-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .intro-content {
    display: flex;
    flex-direction: column;
    
    .intro-image {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
    }
    
    .intro-text {
      .intro-desc {
        font-size: 28rpx;
        line-height: 1.6;
        color: #666;
        margin-bottom: 30rpx;
        display: block;
      }
      
      .intro-features {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .feature-item {
          width: 48%;
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          
          .feature-icon {
            color: #4a90e2;
            font-size: 28rpx;
            margin-right: 16rpx;
          }
          
          .feature-text {
            font-size: 26rpx;
            color: #333;
          }
        }
      }
    }
  }
}

// 加盟优势
.advantages-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .advantages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .advantage-item {
      width: 48%;
      background: #f8fafc;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      text-align: center;
      box-sizing: border-box;
      .advantage-icon {
        width: 80rpx;
        height: 80rpx;
        background: #e6f3ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20rpx;
        
        .icon {
          font-size: 36rpx;
        }
      }
      
      .advantage-title {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .advantage-desc {
        display: block;
        font-size: 24rpx;
        color: #666;
        line-height: 1.4;
      }
    }
  }
}

// 加盟流程
.process-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .process-steps {
    display: flex;
    flex-direction: column;
    
    .process-step {
      display: flex;
      align-items: flex-start;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .step-number {
        width: 60rpx;
        height: 60rpx;
        background: #4a90e2;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 30rpx;
        flex-shrink: 0;
      }
      
      .step-title {
        display: block;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
      }
      
      .step-desc {
        display: block;
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

// 支持政策
.support-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .support-list {
    .support-item {
      background: #f8fafc;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .support-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
        
        .support-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
        }
        
        .support-tag {
          font-size: 22rpx;
          color: #4a90e2;
          background: #e6f3ff;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
        }
      }
      
      .support-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

// 成功案例
.cases-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .cases-scroll {
    white-space: nowrap;
    
    .cases-container {
      display: inline-flex;
      
      .case-item {
        width: 400rpx;
        margin-right: 20rpx;
        background: #f8fafc;
        border-radius: 16rpx;
        overflow: hidden;
        
        .case-image {
          width: 100%;
          height: 240rpx;
        }
        
        .case-info {
          padding: 24rpx;
          
          .case-title {
            display: block;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .case-location {
            display: block;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 8rpx;
          }
          
          .case-result {
            display: block;
            font-size: 24rpx;
            color: #4a90e2;
            font-weight: bold;
          }
        }
      }
    }
  }
}

// 常见问题
.faq-section {
  background: white;
  margin-bottom: 20rpx;
  padding: 0 30rpx 40rpx;
  
  .faq-answer {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    padding: 20rpx;
    display: block;
  }
}

// 底部咨询栏
.consultation-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
  
  .consultation-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .contact-info {
      .contact-phone {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #4a90e2;
        margin-bottom: 8rpx;
      }
      
      .contact-desc {
        display: block;
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .consult-btn {
      background: linear-gradient(135deg, #4a90e2, #5aa0f0);
      color: white;
      border-radius: 50rpx;
      font-size: 28rpx;
      font-weight: bold;
      box-shadow: 0 4rpx 16rpx rgba(74, 144, 226, 0.3);
      margin: unset;
      .btn-text {
        color: white;
      }
    }
  }
}
</style>